import {
  computed,
  onMounted,
  reactive,
  ref,
  toRef,
  toRefs,
  watch,
  onRenderTracked,
  onRenderTriggered,
} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
function qqq(props) {
  let state = reactive({
    count: 666,
  });
  let store = useStore(); // this.$store
  let router = useRouter(); // this.$router
  let route = useRoute(); // this.$route
  console.log(state, toRefs(state));
  // let count = toRef(state, "count");
  // console.log(count);
  // let obj = toRefs(state);
  function add() {
    console.log("add");
    // count.value++;
    state.count++;
    // obj.count.value++;
  }
  watch(
    () => state.count,
    () => {
      console.log("count 改变");
    }
  );
  let type = computed(() => {
    return state.count % 2 ? "奇数" : "偶数";
  });
  let name = computed({
    get: () => {
      return store.state.name;
    },
    set(val) {
      store.commit("changeName", val);
    },
  });
  onMounted(() => {
    console.log("组件加载完成");
  });
  // onRenderTracked(({ key, target, type }) => {
  //   console.log({ key, target, type });
  // });
  // onRenderTriggered(({ key, target, type }) => {
  //   console.log({ key, target, type });
  // });
  return {
    ...toRefs(state),
    add,
    type,
    name,
  };
}
export default qqq